<template>
  <div class="b-g-f">
    <van-uploader
      v-model="fileList"
      accept="image/*"
      :multiple="multiple"
      :before-delete="beforeDelete"
      :show-upload="false"
      :deletable="!isDetails"
      :max-count="maxCount"
    >
    </van-uploader>
    <span
      v-if="fileList.length < maxCount"
      class="p-t-5"
      style="display: inline-block;"
    >
      <img
        v-if="!isDetails"
        class="upload-img"
        src="@/assets/img/uploadImg.png"
        alt=""
        @click="upload"
      />
    </span>
  </div>
</template>

<script>
import { getHandle } from "@/api";
import { Uploader, Button, Icon } from "vant";
import pageList from "@/router/index.js";
import { imgPaths } from "@/filters";
export default {
  components: {
    [Uploader.name]: Uploader,
    [Button.name]: Button,
    [Icon.name]: Icon,
  },
  props: {
    value: Array,
    maxCount: {
      type: Number,
      default: 9,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    isDetails: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  watch: {
    value(val) {
      if (!(val && val.length > 0)) {
        this.fileList = [];
      } else {
        this.fileList = val.map((item) => {
          if(item != ''){
            if(typeof item == 'object'){
            return item
          }else{
            let a = {
              url : imgPaths(item),
              baseUrl: item,
              isImage : true,
              }
              return a;
            }
          }


        });
      }
    },
  },
  created() {
    let self = this;
    this.$nextTick(() => {
      if (!(this.value && this.value.length > 0)) {
        this.fileList = [];
      } else {
        self.fileList = self.value;
        self.fileList = self.fileList.map((item) => {
          // item.url = imgPaths(item);
          // item.isImage = true;

          return {
            url : imgPaths(item),
            baseUrl: item,
            isImage : true
          };
        });

      }
    });
    this.$bridge.register("showImg1", (data) => {
      let a = {
        url : imgPaths(data),
        baseUrl: data,
        isImage : true
      };
      self.fileList.push(a);
      self.$emit("input", self.fileList);
    });
  },

  mounted() {},
  methods: {
    upload() {
      this.$bridge.call("selectImage1");
      this.$bridge.call("base.selectImage1");
    },
    beforeDelete(file, detail) {
      this.fileList.splice(detail.index, 1);
      this.$emit("input", this.fileList);
      return true;
    },
  },
};
</script>

<style scoped>
.upload-img {
  width: 88px;
  height: 83px;
}
</style>
